// 分析：点击 banner 中的li时
// 1.body的背景图也要改变 2.music_img类名中的 img标签的 url要改变，text也变
// 3.音乐播放、图片旋转 4.m_btn 中的 title属性和文本改变为暂停
// 要点：获取到当前的 li 索引与图片歌曲建立联系
// -----------------------------------------------------------


// 1.获取需要的元素
var index = 0;            
var li = $('.banner ul li');
var img = $('.music .m_img img');
var text = $('.music .m_text');
var a = $('.m_btn a');
var mp3 = $('.music .m_mp3');  
var myclose = $('.music .m_close');
//  2.准备需要的标签
var flag = false; // 标记
var close = false; //关闭标记

// 3.开始进行事件处理
li.click(function () {   
    index = $(this).index();
    show();   
})
// 4.准备封装的函数
// 封装一个包含所有变化的方法，因为等下 上一首下一首 也要使用一样的代码
function show() {
    // 更换背景图,调用背景更换函数
    bg_change(index + 1);
    img_text_change(index + 1);
    btn_change();
    img_rotate();
    mp3_change()
}

// 准备需要用到的交互操作并分别封装成函数
// 封装背景更换函数
function bg_change(idx) {
    $('body').css({
        "background": "url(img/"+ idx + "_bg.jpg) no-repeat",
        "background-size": "cover"
    })
}

// 封装 播放器件的图片与文字变化
function img_text_change(idx) {
    // console.log(typeof img);  检验 img是否被声明
    img.attr("src", "img/" + idx + ".jpg");
    text.html(li.eq(index).attr("title"))
}
// 封装点歌按钮
function btn_change() {
    a.eq(1).html("||").addClass("m_pause").attr("title","暂停")
}
// 封装图片旋转
function img_rotate() {
    li.eq(index).addClass("img_rotate").siblings().removeClass("img_rotate")
}
// 封装歌曲播放
function mp3_change() {
    mp3.attr("src", li.eq(index).attr("datasrc"));
    mp3.get(0).play();   // get(0)是固定写法
    // 修改 flag 值
    flag = true;
}

// 暂停播放歌曲
// 
// console.log($(".m_play")[0]);

$('.m_play').click(function () {
    // 歌曲暂停、图片停止转动、播放器件与提示改变
    if (flag) {
        mp3.get(0).pause();  // 暂停歌曲
        li.eq(index).removeClass("img_rotate");
        a.eq(1).html("█").removeClass("m_pause").attr("title", "播放");
        flag = false;   // flag 改为 false
    } else {
        // 播放歌曲、图片转动、播放器件与提示改变
        mp3_change(); 
        img_rotate();
        btn_change();
        bg_change(index + 1);   // 背景也要改变
        flag = true;
    }
})

// 上一首
a.eq(0).click(function () {
    index--;
    // 当 索引为 0 时，再点击上一首的索引要改为最后一首的索引
    if (index < 0) {
        index = li.length - 1
    }
    show();
})
// 下一首
a.eq(2).click(function () {
    index++;
    if (index > li.length - 1) {
        index = 0
    }
    show();
})

// 播放器件隐藏或显示
myclose.click(function () {
    // console.log(22);
    if (close) {
    $(this).html("&lt;").css("background-color", "rgb(48, 58, 70)");
    $(this).parent().animate({"left": "0px"},800)    // 显示 音乐器件
    close = false;
    } else {
    $(this).html("&gt;").css("background-color", "green");
    $(this).parent().animate({"left": "-520px"},800)    // 隐藏 音乐器件
    close = true;
    }
})